<template>
  <div class="setting">
    <!-- card包裹 -->
    <el-card>
      <!-- tab切换 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="one" class="tabone">
          <el-button
            @click="openAdd"
            type="primary"
            size="mini"
            class="add_btn"
          >
            + 新增角色</el-button
          >

          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="200">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="200">
            </el-table-column>
            <el-table-column prop="description" label="描述" width="400">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="openSetRole(scope.row.id)" type="text"
                  >分配权限</el-button
                >
                <el-button type="text" @click="openDialog(scope.row)"
                  >修改</el-button
                >
                <el-button type="text" @click="delRole(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <el-pagination
            class="role_pagination"
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="page.currentPage"
            :page-sizes="page.pagesizes"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </el-tab-pane>

        <el-tab-pane label="公司信息" name="two" class="tabtwo">
          <el-form
            :model="comp_form"
            status-icon
            ref="comp_form"
            label-width="100px"
            class="demo-comp_form"
          >
            <el-form-item label="企业名称">
              <el-input v-model="comp_form.name" readonly></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="comp_form.companyAddress" readonly></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input v-model="comp_form.companyPhone" readonly></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="comp_form.mailbox" readonly></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="comp_form.remarks" readonly></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- card包裹 -->

    <!-- dialog弹框 -->
    <el-dialog title="提示" :visible.sync="dialogShow" @closed="dialogClosed">
      <el-form ref="set-form" :model="formData" label-width="100px">
        <el-form-item
          label="角色名称"
          prop="name"
          :rules="{ required: true, message: '名称必填项' }"
        >
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item
          label="角色描述"
          prop="description"
          :rules="{ required: true, message: '名称必填项' }"
        >
          <el-input v-model="formData.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分配权限弹框 -->
    <setRole ref="setRole" :id="id" :showRole.sync="showRole"></setRole>
  </div>
</template>

<script>
import {
  getRoleListApi,
  updateRoleApi,
  addRoleApi,
  delRoleApi,
  getCompanyApi
} from '@/api/setting'

import { mapState } from 'vuex'
export default {
  data() {
    return {
      activeName: 'one',
      tableData: [],
      page: {
        // 当前页
        currentPage: 1,
        // 页容量集合
        pagesizes: [1, 2, 5, 10, 20, 30],
        // 页容量
        pagesize: 5,
        // 数据总条数据
        total: 30
      },
      dialogShow: false,
      formData: {
        name: '',
        description: ''
      },
      comp_form: {
        name: '',
        companyAddress: '',
        companyPhone: '',
        mailbox: '',
        remarks: ''
      },
      showRole: false,
      id: ''
    }
  },
  components: {
    setRole: () => import('./component/setRole.vue')
  },
  methods: {
    // 打开分配权限
    openSetRole(id) {
      this.id = id
      this.$refs.setRole.getRolePerm(id)
      this.showRole = true
    },

    // 获取公司信息
    async getCompanyInfo() {
      const res = await getCompanyApi(this.userInfo.id)
      this.comp_form = res
    },
    // 删除角色事件
    delRole(obj) {
      this.$confirm('此操作将永久删除,不可逆转')
        .then(async res => {
          await delRoleApi(obj.id)
          this.$message.success('删除成功')

          if (this.tableData.length === 1 && this.page.currentPage > 1) {
            this.page.currentPage = this.page.currentPage - 1
          }
          this.getRoleList()
        })
        .catch(err => {
          console.log(err)
        })
    },
    // dialog 关闭事件
    dialogClosed() {
      console.log('dialog关闭')
      this.$refs['set-form'].resetFields()
      this.formData = {
        name: '',
        description: ''
      }
    },
    // 监听新增 dialog
    openAdd() {
      this.dialogShow = true
    },

    // 监听dialog确认按钮
    async submit() {
      // 修改 dialog 确认按钮触发
      if (this.formData.id) {
        console.log('asf')
        await updateRoleApi(this.formData)
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.dialogShow = false
        this.getRoleList()
      } else {
        // 新增 dialog 确认触发
        console.log('新增')
        this.$refs['set-form'].validate(async res => {
          if (res) {
            await addRoleApi(this.formData)
            this.$message.success('新增成功')
            this.dialogShow = false
            this.getRoleList()
          }
        })
      }
    },

    // 打开修改 dialog 触发事件
    openDialog(obj) {
      this.dialogShow = true
      this.formData.name = obj.name
      this.formData.description = obj.description
      this.formData.id = obj.id
    },
    // 监听当前选中第几页
    currentChange(current) {
      this.page.currentPage = current
      this.getRoleList()
      console.log(2)
    },
    // 监听页容量变化
    sizeChange(sizes) {
      console.log(1)
      this.page.pagesize = sizes
      this.getRoleList()
    },
    // 获取角色列表数据 渲染
    async getRoleList() {
      const res = await getRoleListApi({
        page: this.page.currentPage,
        pagesize: this.page.pagesize
      })
      this.tableData = res.rows
      this.page.total = res.total
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created() {
    this.getRoleList()
    this.getCompanyInfo()
  }
}
</script>

<style lang="scss" scoped>
.setting {
  padding: 20px;
  .el-card {
    .el-tabs {
      ::v-deep .el-tabs__item {
        font-size: 18px;
      }
      .tabone {
        padding: 30px 20px;
        .add_btn {
          margin-bottom: 20px;
        }
        .role_pagination {
          text-align: center;
          margin-top: 20px;
        }
      }

      .tabtwo {
        padding: 40px 100px;
        .el-input {
          width: 500px;
        }
      }
    }
  }
}
</style>
